<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <el-container>
   <el-header>
    <div class="logo">
      <img src="../assets/logo.png" alt="logo" />
        <div class="title">蓝海银行运维管理平台</div>
        <div><i :class="isCollapsed ? 'el-icon-s-unfold':'el-icon-s-fold'" @click="toggleMenu"></i></div>
    </div>
    <div class="info">
    <el-dropdown @command="handleCommand">
       <span class="el-dropdown-link">
            {{ user.username}}<i class="el-icon-arrow-down el-icon--right"></i>
       </span>
       <el-dropdown-menu slot="dropdown">
       <el-dropdown-item command="chpwd">修改密码</el-dropdown-item>
       <el-dropdown-item command="logout" divided>退出</el-dropdown-item>
       </el-dropdown-menu>
    </el-dropdown>
    </div>
    <!-- 修改密码 -->
    <el-dialog
             title="修改用户"
             :visible.sync="chpwddialogVisible" @close="resetForm('chpwd')">
             <el-form :model="chpwdForm" :rules="chpwdRules" ref="chpwd" label-width="100px" >
               <el-form-item label="用户名" >
                 {{user.username}}
               </el-form-item>
               <el-form-item label="当前密码" prop="oldPassword">
                 <el-input v-model="chpwdForm.oldPassword"></el-input>
               </el-form-item>
               <el-form-item label="新密码" prop="password">
                 <el-input v-model="chpwdForm.password"></el-input>
               </el-form-item>
               <el-form-item label="确认新密码" prop="checkpass">
                 <el-input v-model="chpwdForm.checkpass"></el-input>
               </el-form-item>
             </el-form>
              <span slot="footer" class="dialog-footer">
              <el-button @click="chpwddialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="changePass">确 定</el-button>
             </span>
        </el-dialog>
    </el-header>
    <el-container>
  <el-aside :width="isCollapsed ? '64px' : '200px'">
    <el-menu  background-color="#545c64"  text-color="#fff"   active-text-color="#ffd04b" :collapse="isCollapsed" :router="true">
      <el-submenu v-for="item in menulist" :key="item.id" :index="item.id + ''">
          <template slot="title"><i class="el-icon-menu"></i><span slot="title">{{ item.itemName}}</span></template>
          <el-menu-item v-for="subitem in item.children" :key="subitem.id" :index="subitem.path">{{subitem.itemName}}</el-menu-item>

        </el-submenu>

          <el-menu-item index="2-4-1"><i class="el-icon-menu"></i><span slot="title">选项1</span></el-menu-item>
          <el-menu-item index="2-4-2"><i class="el-icon-menu"></i><span slot="title">退出</span></el-menu-item>

    </el-menu>
  </el-aside>
    <el-main>
      <router-view></router-view>
    </el-main>
    </el-container>
    </el-container>
</template>

<script>
export default {
  created() {
    this.getMenulist()
    this.getUserInfo()
  },
  data() {
    var validatePass2 = (rule, value, callback) => {
      if (value !== this.chpwdForm.password) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      menulist: [], // 这里定义了这个数据在组件里才可以使用，组件根据数据去填充
      isCollapsed: false,
      chpwddialogVisible: false,
      chpwdForm: {
        oldPassword: '',
        password: '',
        checkpass: ''
      },
      chpwdRules: {
        oldPassword: [
          { required: true, message: '请输入旧密码', trigger: 'blur' },
          { min: 4, max: 16, message: '长度在 4 到 16 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入新密码', trigger: 'blur' },
          { min: 4, max: 16, message: '长度在 4 到 16 个字符', trigger: 'blur' }
        ],
        checkpass: [
          { required: true, message: '请输入确认新密码', trigger: 'blur' },
          { min: 4, max: 16, message: '长度在 4 到 16 个字符', trigger: 'blur' },
          { validator: validatePass2, trigger: 'blur' }
        ]

      },
      user: {}
    }
  },
  methods: {
    resetForm(name) {
      // const name = 'addUser'
      // console.log('++++++++++++++++++++')
      console.log(name)
      this.$refs[name].resetFields()
    },
    logout() {
      window.localStorage.removeItem('token')
      this.$router.push('/login')
    },
    async getMenulist() {
      const { data: response } = await this.$http.get('users/menulist/')
      if (response.code) {
        return this.$message.error(response.$message)
      }
      console.log(response)
      this.menulist = response.items
    },
    toggleMenu () {
      this.isCollapsed = !this.isCollapsed
    },
    handleCommand(command) {
      if (command === 'logout') {
        this.logout()
      } else if (command === 'chpwd') {
        console.log('command')
        this.chpwddialogVisible = true
      }
    },
    async getUserInfo() {
      const { data: response } = await this.$http.get('users/mgr/whoami/')
      if (response.code) {
        return this.$message.error(response.$message)
      }
      // console.log(response)
      this.user = response
    },
    changePass() {
      const name = 'chpwd'
      this.$refs[name].validate(async (valid) => {
        if (valid) {
          const { data: response } = await this.$http.post(`users/mgr/${this.user.id}/setpwd/`, this.chpwdForm)
          if (response.code) {
            return this.$message.error(response.message)
          }
          this.$message('当前用户密码修改成功')
          this.chpwddialogVisible = false
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>

.el-container {
  height: 100%;
}
.el-header {
  display: flex;
  justify-content: space-between; // 主轴两端对齐
  align-items: center; // 侧轴居中
  padding-left: 5px;
  .logo {
    display: flex;
    img {
     width: 30px;
   }
    .title {
     font-size: 24px;
     margin-left: 5px;
   }
   i {
    font-size: 30px ;
    margin-left: 5px
   }
 }
}
.el-aside {
  background-color: #112233;
}
.el-main {
  background-color: #f0f2f5;
}
.el-menu {
  border-right: 0px;
}
</style>